// components/auth/LoginForm.tsx
"use client"

import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { PasswordInput } from "./PasswordInput"

// 本地定义的登录表单数据类型
interface LoginFormData {
  email: string
  password: string
}

interface LoginFormProps {
  formData: LoginFormData
  onFormChange: (data: LoginFormData) => void
  onSubmit: (e: React.FormEvent) => void
  showPassword: boolean
  onTogglePassword: () => void
  remember: boolean
  onRememberChange: (checked: boolean) => void
  isLoading: boolean
  userType: 'member' | 'laboratory'
  onEmailChange?: (email: string) => void
  userTypeInfo?: {
    userType: 'laboratory' | 'member' | null
    fullName?: string
    institutionName?: string
    laboratoryName?: string
  } | null
  isCheckingUserType?: boolean
  error?: string | null
}

export function LoginForm({
  formData,
  onFormChange,
  onSubmit,
  showPassword,
  onTogglePassword,
  remember,
  onRememberChange,
  isLoading,
  userType,
  onEmailChange,
  userTypeInfo,
  isCheckingUserType,
  error
}: LoginFormProps) {
  const emailPlaceholder = userType === 'member' ? '请输入个人邮箱' : '请输入实验室邮箱'
  const passwordId = userType === 'member' ? 'member-password' : 'lab-password'
  const emailId = userType === 'member' ? 'member-email' : 'lab-email'
  const rememberId = userType === 'member' ? 'remember-member' : 'remember-lab'

  // 处理邮箱输入变化
  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newEmail = e.target.value
    onFormChange({ ...formData, email: newEmail })
    if (onEmailChange) {
      onEmailChange(newEmail)
    }
  }

  // 检查当前用户类型是否与账户类型匹配
  const isUserTypeMatched = !userTypeInfo || userTypeInfo.userType === userType
  const showUserTypeWarning = userTypeInfo && userTypeInfo.userType !== userType

  return (
    <form onSubmit={onSubmit} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor={emailId}>邮箱地址</Label>
        <div className="relative">
          <Input
            id={emailId}
            type="email"
            placeholder={emailPlaceholder}
            value={formData.email}
            onChange={handleEmailChange}
            required
            className={showUserTypeWarning ? "border-red-500" : ""}
          />
          {isCheckingUserType && (
            <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
              <div className="animate-spin h-4 w-4 border-2 border-primary border-t-transparent rounded-full"></div>
            </div>
          )}
        </div>
        
        {/* 用户信息显示 */}
        {userTypeInfo && (
          <div className={`text-sm p-2 rounded ${isUserTypeMatched ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'}`}>
            <div className="flex items-center gap-2">
              <span className="font-medium">{userTypeInfo.fullName}</span>
              {userTypeInfo.institutionName && (
                <span className="text-xs bg-gray-100 px-2 py-1 rounded">
                  {userTypeInfo.institutionName}
                </span>
              )}
              {userTypeInfo.laboratoryName && (
                <span className="text-xs bg-blue-100 px-2 py-1 rounded">
                  {userTypeInfo.laboratoryName}
                </span>
              )}
            </div>
            {showUserTypeWarning && (
              <div className="mt-1 text-xs">
                {userTypeInfo.userType === 'laboratory' 
                  ? '请切换到"实验室"登录'
                  : '请切换到"实验室成员"登录'
                }
              </div>
            )}
          </div>
        )}
      </div>
      
      <div className="space-y-2">
        <Label htmlFor={passwordId}>密码</Label>
        <PasswordInput
          id={passwordId}
          value={formData.password || ""}
          onChange={(e) => onFormChange({ ...formData, password: e.target.value })}
          placeholder="请输入密码"
          showPassword={showPassword}
          onToggle={onTogglePassword}
        />
      </div>

      <div className="flex items-center space-x-2">
        <input
          type="checkbox"
          id={rememberId}
          checked={remember}
          onChange={(e) => onRememberChange(e.target.checked)}
          className="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
        />
        <Label htmlFor={rememberId} className="text-sm text-muted-foreground">
          记住登录信息
        </Label>
      </div>

      {/* 错误信息显示 */}
      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-3 py-2 rounded-md text-sm">
          {error}
        </div>
      )}

      <Button 
        type="submit" 
        className="w-full" 
        disabled={isLoading || showUserTypeWarning || isCheckingUserType}
      >
        {isLoading ? "登录中..." : "登录"}
      </Button>
    </form>
  )
}